【CSS】border-bottom-left-radius - 境界線の左下角の曲線

CSSのborder-bottom-left-radiusプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-bottom-left-radius

border-bottom-left-radiusは“境界線の左下角の曲線”のプロパティです。

基本構文

border-bottom-left-radius: 水平の軌道長半径 垂直の軌道長半径;

値が１個のみの場合、水平と垂直の軌道長半径の両方に適用します。

サンプル

値：１個

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-bottom-left-radius: 40px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

値：２個

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-bottom-left-radius: 20px 40px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー